


<template>
  <div class="info">
    <MyHead title="个人信息"></MyHead>
    <div class="cell">
        <van-cell-group inset v-if="userInfo">
          <van-cell title="手机号" icon="phone-o" :value="userInfo.phone" />
          <van-cell title="头像" icon="photo-o" >
              <template #extra>
                <UploadFile @getfilepath="changeavatar">
                    <img class="avatar"  :src="userInfo.avatar.replace(/public/,baseURL)" v-if="userInfo.avatar" alt="">
                    <img class="avatar"  :src="pic" v-else alt="">
                </UploadFile>
              </template>
          </van-cell>
          <van-cell title="用户名" icon="user-o" :value="userInfo.username" is-link  @click="changeInfo('username','用户名',userInfo.username,null)" />
          <van-cell title="昵称" icon="contact-o" :value="userInfo.nickname" is-link @click="changeInfo('nickname','昵称',userInfo.nickname,null,)"   />
          <!-- role 2男性  1 女性  0 未知  -->
          <van-cell title="性别" icon="flower-o" :value="userInfo.role | sexFormat" is-link @click="changeInfo('role','性别',userInfo.role,null,true)"  />

          <van-cell title="邮箱" icon="envelop-o" :value="userInfo.email" is-link @click="changeInfo('email','邮箱',userInfo.email,reg.email )"  />
          <van-cell title="注册时间" icon="underway-o" :value="userInfo.time | timeFormat "  />
          <van-cell title="学科" icon="comment-o" :value="userInfo.subject" is-link  @click="changeInfo('subject','学科',userInfo.subject,null)" />
          <van-cell title="班级" icon="coupon-o" :value="userInfo.class" is-link @click="changeInfo('class','班级',userInfo.class,null)" />


        </van-cell-group>
        <div class="refresh" >
            <van-button @click="getUserInfoAsync"  type="warning" block>刷新用户信息  <van-icon name="replay" /> </van-button>
          </div>
      </div>

      <van-dialog v-model="show" :title="'修改 ' + title" :overlay="true"  :showConfirmButton="false" >
          <div class="mask">
            <div class="mbox">
              <div class="form mt10" >
                <van-form ref="form">
                  <div class="center" v-if="flag">
                      <van-radio-group style="padding:15px;" :label="title" v-model="obj[key]" direction="horizontal" >
                        <van-radio :name="2">男性</van-radio>
                        <van-radio :name="1">女性</van-radio>
                    </van-radio-group>
                  </div>

                  <van-field
                    v-else
                    :label="title"
                    placeholder="请输入"
                    center
                    clearable
                    v-model="obj[key]"
                    :rules="[{required:true,message:'请填写'+title},...rules]"
                    />
                  <div style="margin:15px;"  >
                  <van-button @click="todoupdate" native-type="button" block class="mt10" type="info">修改</van-button>
                  </div>
                </van-form>
              <div  style="margin:15px;">
                <van-button block class="mt10" type="default" @click="show=false">关闭</van-button>
              </div>
              </div>
            </div>
          </div>
      </van-dialog>

  </div>
</template>

<script>
import { tochangeuserinfo } from '@/api/api'
export default {
  data(){
    return {
      show:false,
      title:'',
      form:{},
      obj:{},
      key:'',
      rules:[],
      flag:false,
    }
  },
  methods:{
    changeInfo(key,title,value,rules,flag){
      this.key = key;  // 修改 userInfo 里面的字段

      this.title = title;
      this.$set(this.obj,[key],value)
      this.rules =  [{pattern:rules, message:title+'格式不正确'}]
      this.flag = flag;
      this.show = true;
      // this.obj.nickname = value
    },
    todoupdate(){
      this.$refs.form.validate()
      .then(async (valid)=>{
          // 修改
        let res = await tochangeuserinfo(this.obj)
        if(res.code==200){
          this.ShowToast('修改'+this.title+'成功')
          this.show = false;
          this.getUesrInfoData({  // vuex mutations
            ...this.userInfo,
            ...this.obj   // {nickname:"123123"}
          })
        }
      })
      .catch(err=>{
        this.ShowError('格式不对')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.center{
  display: flex;
  justify-content: center;
}
.mask{
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .mbox{
    width:330px;
    height:230px;
    background: #fff;
    border-radius: 10px;
    margin-top:20px;
  }
}
.avatar{
  width:40px;
  height:40px;
  border-radius: 50%;
}
  .info{
    width:100%;
    min-height: 100vh;
    background: #f4f4f4;
    .cell{
      margin-top:30px;
      ::v-deep .van-cell{
        align-items: center !important;
      }
    }
    .refresh{
      padding:15px;
    }
  }
</style>
